<template>
  <div class="device-add-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>添加设备</span>
          <el-button 
            type="primary" 
            icon="el-icon-arrow-left" 
            @click="handleBack"
          >
            返回
          </el-button>
        </div>
      </template>
      
      <el-form ref="deviceForm" :model="deviceForm" :rules="rules" label-width="120px" class="device-form">
        <el-form-item label="设备编号" prop="deviceNumber">
          <el-input 
            v-model="deviceForm.deviceNumber" 
            placeholder="请输入设备编号"
            clearable
          />
          <div class="form-tip">设备编号为设备的唯一标识符</div>
        </el-form-item>
        
        <el-form-item label="设备名称" prop="name">
          <el-input 
            v-model="deviceForm.name" 
            placeholder="请输入设备名称"
            clearable
          />
        </el-form-item>
        
        <el-form-item label="设备类型" prop="type">
          <el-select 
            v-model="deviceForm.type" 
            placeholder="请选择设备类型"
            clearable
          >
            <el-option label="智能牵引板" value="智能牵引板" />
            <el-option label="监控摄像头" value="监控摄像头" />
            <el-option label="传感器" value="传感器" />
            <el-option label="其他设备" value="其他设备" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="设备描述" prop="description">
          <el-input 
            v-model="deviceForm.description" 
            type="textarea" 
            :rows="4" 
            placeholder="请输入设备描述（可选）"
          />
        </el-form-item>
        
        <el-form-item label="设备位置" prop="location">
          <el-input 
            v-model="deviceForm.location" 
            placeholder="请输入设备位置（可选）"
            clearable
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleSubmit" :loading="submitting">
            提交
          </el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button @click="handleBack">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { deviceApi } from '../services/api'
import { ElMessage } from 'element-plus'

export default {
  name: 'DeviceAdd',
  setup() {
    const router = useRouter()
    const submitting = ref(false)
    
    const deviceForm = reactive({
      deviceNumber: '',
      name: '',
      type: '',
      description: '',
      location: ''
    })
    
    const rules = {
      deviceNumber: [
        { required: true, message: '请输入设备编号', trigger: 'blur' },
        { min: 3, max: 50, message: '设备编号长度应在 3 到 50 个字符之间', trigger: 'blur' }
      ],
      name: [
        { required: true, message: '请输入设备名称', trigger: 'blur' },
        { min: 1, max: 100, message: '设备名称长度应在 1 到 100 个字符之间', trigger: 'blur' }
      ],
      type: [
        { required: true, message: '请选择设备类型', trigger: 'change' }
      ]
    }
    
    // 提交表单
    const handleSubmit = async () => {
      try {
        // 表单验证
        if (!deviceForm.deviceNumber || !deviceForm.name || !deviceForm.type) {
          ElMessage.warning('请填写必填项')
          return
        }
        
        submitting.value = true
        const response = await deviceApi.createDevice(deviceForm)
        
        if (response.data) {
          ElMessage.success('设备添加成功')
          router.push('/')
        }
      } catch (error) {
        console.error('添加设备失败:', error)
        ElMessage.error(error.response?.data?.message || '添加设备失败')
      } finally {
        submitting.value = false
      }
    }
    
    // 重置表单
    const handleReset = () => {
      Object.keys(deviceForm).forEach(key => {
        deviceForm[key] = ''
      })
    }
    
    // 返回上一页
    const handleBack = () => {
      router.back()
    }
    
    return {
      deviceForm,
      rules,
      submitting,
      handleSubmit,
      handleReset,
      handleBack
    }
  }
}
</script>

<style scoped>
.device-add-container {
  padding: 10px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.device-form {
  margin-top: 15px;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .device-add-container {
    padding: 8px;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .card-header .el-button {
    width: 100%;
  }
  
  /* 调整表单元素在小屏幕上的显示 */
  :deep(.el-form) {
    width: 100%;
  }
  
  :deep(.el-form-item__label) {
    width: 100px;
    font-size: 14px;
  }
  
  :deep(.el-form-item__content) {
    width: calc(100% - 100px);
  }
  
  /* 确保表单元素在小屏幕上完全可见 */
  :deep(.el-input),
  :deep(.el-select) {
    width: 100%;
  }
  
  /* 调整按钮组在小屏幕上的布局 */
  :deep(.el-form-item__content .el-button-group),
  :deep(.el-form-item__content .el-button) {
    width: 100%;
    margin-bottom: 10px;
  }
  
  :deep(.el-form-item__content .el-button:last-child) {
    margin-bottom: 0;
  }
}

@media (max-width: 480px) {
  /* 进一步调整在极小屏幕上的显示 */
  :deep(.el-form--label-right) {
    --el-form-item-label-width: 90px;
  }
  
  :deep(.el-form-item__label) {
    width: 90px;
    font-size: 13px;
    padding-right: 8px;
  }
  
  :deep(.el-form-item__content) {
    width: calc(100% - 90px);
  }
  
  /* 调整输入框和选择器的高度 */
  :deep(.el-input__inner) {
    height: 34px;
    font-size: 13px;
  }
  
  /* 调整按钮尺寸 */
  :deep(.el-button) {
    padding: 8px 12px;
    font-size: 13px;
  }
  
  /* 确保文本域在小屏幕上可以正常输入 */
  :deep(.el-textarea) {
    width: 100%;
  }
  
  :deep(.el-textarea__inner) {
    min-height: 80px;
    font-size: 13px;
  }
}
</style>